<script setup>

import { ref } from "vue";

import tabbarData from "@/assets/data/tabbar.js";
import { getImageUrl } from "@/utils/load_assets.js";

const currentIndex = ref(0);

</script>

<template>
  <div class="tabbar">
    <van-tabbar v-model="currentIndex" active-color="#ff9854">
      <template v-for="(item, index) in tabbarData" :key="index">
        <van-tabbar-item :to="item.path">
          <span>{{ item.text }}</span>
          <template #icon>
            <img v-if="currentIndex === index" :src="getImageUrl(item.imageActive)" />
            <img v-else :src="getImageUrl(item.image)" />
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<style lang="less" scoped>
.tabbar {
  // 修改UI组件库的样式方案:

  // 1.全局修改(定义在 :root 中)覆盖默认变量的值: 任何地方只要用到该变量, 都会被修改
  // 2.局部修改(定义在.tabbar中)覆盖默认变量的值: 只针对 .tabbar 子元素才生效
  // --van-tabbar-item-icon-size: 28px !important;

  // 3.找到对应的类, 对类中的CSS属性重写, :deep(.class)找到子组件的类, 让子组件的类也可以生效
  // :deep(.van-tabbar-item__icon) {
  //   font-size: 24px;
  // }

  // 4.如果使用插槽, 插入自己的元素, 那么在自己的作用域中直接修改这个元素的属性即可
  img {
    height: 26px;
  }
}
</style>
